window.onload = function() {
    // 发送ajax请求
    $.ajax({
        // 1.发送请求类型
        type: "post",
        // 2.接口路径
        url: "/js/describePage",
        // 3.是否携带参数
        data: null,
        // 4.返回数据类型
        dataType: "json",
        // 5.回调函数 data表示后台接口返回的数据
        success: function(data) {
            let divobj = document.getElementById("describe");
            // 
            let obj = document.getElementById("div");
            // let spanobj1 = obj.getElementsByTagName("span")[4].innerText;
            // let spanobj2 = obj.getElementsByTagName("span")[6].innerText;
            let a = "";
            let s = "";
            // 把获取的本地存储转换成json对象
            let teaArr = JSON.parse(data);
            console.log(teaArr);
            // 遍历
            for (let i = 0; i < teaArr.length; i++) {
                //     s += ` <div class="div" id="describe">`;
                a += ` <div class="div_content">`;
                a += `<span  onclick="location.href='03-茶叶.html'">茶叶</span>
                <span>></span>`;
                a += ` <span  onclick="location.href='03-茶叶.html'">全部</span>
                <span>></span>`;
                if (teaArr[i].teaType == 0) {
                    a += `<span>绿茶</span>`;
                } else if (teaArr[i].teaType == 1) {
                    a += `<span>黄茶</span>`;
                } else if (teaArr[i].teaType == 2) {
                    a += `<span>乌龙茶</span>`;
                } else if (teaArr[i].teaType == 3) {
                    a += `<span>红茶</span>`;
                } else if (teaArr[i].teaType == 4) {
                    a += `<span>黑茶</span>`;
                } else if (teaArr[i].teaType == 5) {
                    a += `<span>白茶</span>`;
                } else if (teaArr[i].teaType == 6) {
                    a += `<span>花茶</span>`;
                }
                a += `<span>></span>`;
                a += `<span>${teaArr[i].teaName}</span>`;
                // a += `< /div > `;

                s += ` <div class="article_content">`;
                s += `<div class="top clearfloat">`;
                s += `<div class="article_img left">
                        <img src="../img/${teaArr[i].teaImg}" alt=""></div>`;
                s += `<div class="article_message right">`;
                s += `<p>${teaArr[i].teaName}</p>`;
                s += `<hr>
                        <p>￥${teaArr[i].teaPrice}</p>`;
                s += `<p class="article_describe">${teaArr[i].teaDescribe}</p>`;
                if (teaArr[i].teaType == 0) {
                    s += ` <span>分类：绿茶</span>`;
                } else if (teaArr[i].teaType == 1) {
                    s += ` <span>分类：黄茶</span>`;
                } else if (teaArr[i].teaType == 2) {
                    s += ` <span>分类：乌龙茶</span>`;
                } else if (teaArr[i].teaType == 3) {
                    s += ` <span>分类：红茶</span>`;
                } else if (teaArr[i].teaType == 4) {
                    s += ` <span>分类：黑茶</span>`;
                } else if (teaArr[i].teaType == 5) {
                    s += ` <span>分类：白茶</span>`;
                } else if (teaArr[i].teaType == 6) {
                    s += ` <span>分类：花茶</span>`;
                }
                s += ` <div>
                            <button class="bt" id="addShopCar">加入购物车</button>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                        </div>`;
                s += `<span>收藏</span></div></div>`;
                s += ` <div class="article_middle"><img src="../img/${teaArr[i].teaImg}" alt=""></div>`;
                s += `<p class="title">描述</p>
                        <p class="font">饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。 但并不是喝得越多越好,也不是所有的人都适合喝茶。一般来说,每天1-2次,每次3-5克、400毫升的饮量是比较适当的。一般,人们说喝茶还指喝水。</p><img src="../img/describe_img1.webp" alt=""><hr>`;
                s += `<p class="font20">相关商品</p>`;
                s += `<div class="img"><img src="../img/${teaArr[i].teaImg}" alt=""></div>`;
                s += ` <p class="font16">${teaArr[i].teaName}</p><p class="font14">￥${teaArr[i].teaPrice}</p>`;
                s += `</div>`;
                // s += ` </div>`;
            }
            obj.innerHTML = a;
            divobj.innerHTML = s;

            document.getElementById("addShopCar").onclick = function() {
                let shopcar = localStorage.shopCar;
                localStorage.shopCar = data;
                let showteaobj = JSON.parse(data);
                if (shopcar == "" || shopcar == null || shopcar == undefined || shopcar == []) {
                    alert("添加至购物车成功");
                    window.location.href = "08-shopcar.html";
                } else {
                    let bool = false;
                    let shopcararr = JSON.parse(shopcar);
                    for (let i = 0; i < shopcararr.length; i++) {
                        if (shopcararr[i].id == showteaobj[0].id) {
                            bool = true;
                            break;
                        }
                    }
                    if (bool) {
                        alert("该茶叶已添加至购物车");
                    } else {
                        shopcararr.push(showteaobj[0]);
                        localStorage.shopCar = JSON.stringify(shopcararr);
                        alert("添加至购物车成功");
                        window.location.href = "08-shopcar.html";
                    }
                }
            }
        }
    })
}